<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./template-web.js'></script>

    <script type='text/html' id = 'template'>
        <h1>{{title}}</h1>
        {{if books}}
            {{each books as value i}}
                <div>{{value}}</div>
            {{/each}}
        {{/if}}
    </script>

    <script>
        window.onload = function () {
            var data = {
                title: '图书信息',
                books: ['三国', '水浒传', '西游记']
            }
            //参数 模板id 用来渲染的数据
            var html = template('template', data)
            var con = document.getElementById('container')
            con.innerHTML = html
       
        }
    </script>
</head>

<body>
    <div id="container"></div>
</body>

</html>